<template>
    <div class="creation-box" v-if="selectedParentColumn && selectedParentColumn.name === '艺术教育与研究创作'">
      <div class="creation-title">{{ selectedParentColumn.name }}</div>
      <div class="creation-content">
        <div class="creation-detail">
          <div class="creation-tab-list">
            <div 
              v-for="(child, index) in childrenColumns.slice(0, 3)" 
              :key="index"
              class="creation-tab creation-tab-item"
              :class="{ active: selectedChildColumnId === child.columnId }"
              @click="selectTab(child.columnId)">
              {{ child.name }}
            </div>
          </div>
          <div class="creation-tab-content active">
            <div class="creation-article-list">
              <div v-for="article in articleList.slice(0, 1)" :key="article.articleId" class="creation-article-item">
                <div class="creation-article-content">
                  <p v-html="article.content"></p>
                  <img :src="article.coverImageUrl" alt="" class="article-image">
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="swiper creation-swiper">
          <div class="swiper-wrapper creation-swiper-wrapper">
            <a class="swiper-slide creation-swiper-slide" target="_blank">
              <img src="../assets/image/static/05.png"  style="margin-top: 45px;margin-left: 20px;"/>
              <!-- <div class="creation-swiper-item-title">正在举办的展览活动</div> -->
            </a>
          </div>
          <div class="swiper-pagination creation-swiper-pagination"></div>
        </div>
      </div>
      <div class="creation-left-trapezoid"></div>
      <div class="creation-right-trapezoid"></div>
    </div>
  </template>
  
  <script>
  import { defineComponent, ref, onMounted } from 'vue';
  import { getArticleListService, getChildrencolumnsService, getParentColumnsService } from '@/api/user.js';
  
  export default defineComponent({
    name: 'CreationResearch',
    setup() {
      const selectedParentColumn = ref(null);
      const childrenColumns = ref([]);
      const articleList = ref([]);
      const loading = ref(false);
      const selectedChildColumnId = ref(null);
  
      // 获取父级栏目信息
      const fetchParentColumn = async () => {
        try {
          const response = await getParentColumnsService(null); // 假设 pid 为 null 表示获取顶级栏目
          const creationColumn = response.data.find(column => column.name === '艺术教育与研究创作');
          if (creationColumn) {
            selectedParentColumn.value = creationColumn;
            await fetchChildrenColumns(creationColumn.columnId);
          }
        } catch (error) {
          console.error('获取父栏目失败:', error);
        }
      };
  
      // 获取子栏目信息
      const fetchChildrenColumns = async (parentId) => {
        try {
          const response = await getChildrencolumnsService(parentId);
          childrenColumns.value = response.data;
          if (childrenColumns.value.length > 0) {
            selectedChildColumnId.value = childrenColumns.value[0].columnId;
            await fetchArticleList(selectedChildColumnId.value);
          }
        } catch (error) {
          console.error('获取子栏目失败:', error);
        }
      };
  
      // 获取文章列表
      const fetchArticleList = async (childColumnId) => {
        articleList.value = [];
        loading.value = true;
        try {
          const response = await getArticleListService({
            subColumnId: childColumnId,
            parentColumnId: selectedParentColumn.value?.columnId,
            state: '已发布'
          });
          articleList.value = response.data || [];
        } catch (error) {
          console.error('Failed to fetch articles:', error);
        } finally {
          loading.value = false;
        }
      };
  
      const selectTab = async (childColumnId) => {
        selectedChildColumnId.value = childColumnId;
        await fetchArticleList(childColumnId);
      };
  
      onMounted(() => {
        fetchParentColumn();
      });
  
      return {
        selectedParentColumn,
        childrenColumns,
        articleList,
        loading,
        selectTab,
        selectedChildColumnId
      };
    }
  });
  </script>
  
  <style scoped>
@import '../assets/css/main/creation.css';
  </style>